import 'package:cunyutech_flutter_core/cunyutech_flutter_core.dart';
import 'package:cunyutech_flutter_ui/src/ext/main.dart';
import 'package:cunyutech_flutter_ui/src/theme/main.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class CYSwitch extends StatefulWidget {
  CYSwitch({Key key, this.value, this.onChanged }) : super(key: key);

  final bool value;
  final ValueChanged<bool> onChanged;

  @override
  _CYSwitchState createState() => _CYSwitchState();
}

class _CYSwitchState extends State<CYSwitch> {

  static final Color shadowColor1 = Colors.black.withOpacity(0.15);
  static final Color shadowColor2 = Colors.black.withOpacity(0.06);
  static final Color outlineColor = Color(0xFFE5E5E5);
  static final double height = 31;
  static final double width = 51;
  static final double dotWidth = 27;

  static final BoxDecoration activeDecoration = BoxDecoration(
    borderRadius: BorderRadius.circular(height/2)
  );

  static final BoxDecoration defaultDecoration = BoxDecoration(
    border: Border.all(color: outlineColor, width: 2),
    borderRadius: BorderRadius.circular(height/2)
  );

  static final activePadding = EdgeInsets.only(left: 22, right: 2);
  static final defaultPadding = EdgeInsets.only(left: 2, right: 22);

  @override
  Widget build(BuildContext context) {
    var cs = CYThemeData.of(context);
    var handleTap = RequestAction.throttle((){
      widget.onChanged(!widget.value);
    }, 1000);
    return GestureDetector(
      onTap: handleTap,
      child: Container(
        alignment: Alignment.centerRight,
        child: Container(
          width: width,
          height: height,
          constraints: BoxConstraints(
            maxWidth: width,
            maxHeight: height
          ),
          child: AnimatedBoxDecoration(
            decoration: widget.value ? activeDecoration.copyWith(color: cs.primaryColor) : defaultDecoration.copyWith(color: cs.darkForeColorSystem.primaryColor),
            duration: Duration(milliseconds: 150),
            child: AnimatedPadding(
              padding: widget.value ? activePadding : defaultPadding,
              duration: Duration(milliseconds: 150),
              child: Container(
                alignment: Alignment.center,
                child: Container(
                  width: dotWidth,
                  height: dotWidth,
                  decoration: BoxDecoration(
                    color: cs.darkForeColorSystem.primaryColor,
                    borderRadius: BorderRadius.circular(height/2),
                    boxShadow: [
                      BoxShadow(color: shadowColor1, offset: Offset(0, 3), blurRadius:  8),
                      BoxShadow(color: shadowColor2, offset: Offset(0, 3), blurRadius:  1)
                    ]
                  ),
                ),
              ),
            )
          )
        )
      ),
    );
  }
}

class CustomSwitch extends StatelessWidget {
  final Widget inactiveIcon;
  final Widget activeIcon;
  final ValueChanged<bool> onChanged;
  final bool value;

  final double width;
  final double height;

  const CustomSwitch({
    Key key, 
    this.inactiveIcon, 
    this.activeIcon, 
    @required this.onChanged, 
    @required this.value, 
    this.width, 
    this.height
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        onChanged(!value);
      },
      child: Container(
        width: width,
        height: height,
        child: value ? activeIcon : inactiveIcon,
      ),
    );
  }
}
